<template>
  <div class="main">
    <div class="rooms" v-if="rooms">
      <!-- <div v-for="(room, index) of rooms" :key="index"> -->
      <el-descriptions
        class="descriptions"
        :title="targetRoom.name"
        :column="1"
        border
      >
        <template slot="extra">
          <el-button
            @click="edit"
            type="primary"
            icon="el-icon-edit"
            v-show="!change"
            >编辑</el-button
          >
          <el-button
            type="success"
            @click="finish"
            icon="el-icon-finished"
            v-show="change"
            >完成</el-button
          >
        </template>
        <el-descriptions-item label="地点">
          {{ targetRoom.located }}
        </el-descriptions-item>
        <el-descriptions-item label="是否开放">
          <el-switch
            v-model="targetRoom.open"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="updateSate"
          >
          </el-switch>
        </el-descriptions-item>
        <el-descriptions-item label="开放日">
          <!-- <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="ruleForm"
              v-if="activeIndex == index"
            >
              <el-form-item label="" prop="open_time"> -->
          <el-checkbox-group v-model="ruleForm.open_time" v-if="change">
            <el-checkbox label="周一"></el-checkbox>
            <el-checkbox label="周二"></el-checkbox>
            <el-checkbox label="周三"></el-checkbox>
            <el-checkbox label="周四"></el-checkbox>
            <el-checkbox label="周五"></el-checkbox>
            <el-checkbox label="周六"></el-checkbox>
            <el-checkbox label="周日"></el-checkbox>
          </el-checkbox-group>
          <!-- </el-form-item>
            </el-form> -->
          <el-tag
            v-else
            v-for="(day, index) of JSON.parse(targetRoom.open_time)"
            size="small"
            :key="index"
            style="margin-left: 5px"
            >{{ day }}</el-tag
          >
        </el-descriptions-item>
        <el-descriptions-item label="可容纳人数">
          {{ targetRoom.total }}
        </el-descriptions-item>
        <el-descriptions-item label="座位分布">
          <seats :seats="JSON.parse(targetRoom.seats)" />
        </el-descriptions-item>
      </el-descriptions>
      <!-- </div> -->
      <el-pagination
        v-if="total"
        background
        layout="prev, pager, next"
        :page-count="total"
        :pager-count="5"
        style="text-align: center"
        @current-change="(idx) => (activeRoomIndex = idx)"
      >
      </el-pagination>
    </div>
    <div class="calender">
      <el-calendar></el-calendar>
    </div>
  </div>
</template>

<script>
import Seats from "@components/content/Seats";
import ManagerRoomDetail from "@views/Manager/ManagerRoomDetail";
import { delReadingRoom, updateRoomState } from "@network/manager";
import { getReadingRoom } from "@network/user";
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
export default {
  components: {
    ManagerRoomDetail,
    Seats,
  },
  data() {
    return {
      drawer: false,
      id: 0,
      rooms: null,
      ruleForm: {
        open_time: [],
      },
      activeRoomIndex: 1,
      rules: {
        open_time: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个开放时间",
            trigger: "change",
          },
        ],
      },
      change: false,
      total: 0,
    };
  },
  computed: {
    ...mapGetters(["isManager"]),
    targetRoom() {
      console.log("target", this.rooms[this.activeRoomIndex - 1]);
      return this.rooms[this.activeRoomIndex - 1];
    },
  },
  watch: {},
  methods: {
    ...mapMutations(["setNotice"]),
    detail(id) {
      this.id = id;
      this.drawer = true;
    },
    del(name, id) {
      console.log(name, id);
      this.$confirm(`确认删除-${name}-?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await delReadingRoom({ id }).then((res) => {
            if (res.data.tag) {
              this.$message.success("删除成功!");
              this.loadRooms();
            } else {
              this.$message.error("删除失败!");
            }
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    async loadRooms() {
      await getReadingRoom().then((res) => {
        if (res.data.tag) {
          this.rooms = res.data.rooms;
          this.total = this.rooms.length;
          console.log(this.total, "res", this.rooms);
        } else {
          this.$message.error("获取数据失败,请稍候刷新重试");
        }
      });
    },
    updateSate() {
      updateRoomState({
        id: this.targetRoom.id,
        open: this.targetRoom.open,
        open_time:this.ruleForm.open_time
      })
      this.$set(this.rooms[this.activeRoomIndex - 1],'open_time',JSON.stringify(this.ruleForm.open_time));
      console.log("updateSate", this.rooms[this.activeRoomIndex - 1], "!");
    },
    edit(index) {
      // this.id = this.rooms[index].id;
      this.change = true;
      // this.drawer = true;
    },
    finish() {
      this.updateSate();
      this.change = false;
    },
  },
  activated() {
    this.setNotice("阅览室管理");
    this.loadRooms();
    if (!this.isManager) {
      this.$router.push({ name: "s_room" });
    }
  },
};
</script>
<style scoped>
.main {
  height: 88vh;
  display: flex;
  gap: 20px;
}

.rooms {
  width: 1000px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calender {
  width: 480px;
  /* position: absolute; */
}

.block {
  border-radius: 30px;
  min-width: 120px;
  padding: 0 10px;
  margin: 20px 0;
  height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  align-items: center;
  font-size: 1rem;
  color: black;
  font-weight: 600;
}

@media screen and (max-width: 980px) {
  .block {
    font-size: 0.8rem;
  }
}

.block:hover {
  box-shadow: 0px 0px 6px 2px #ff9292;
}

.desc {
  display: flex;
  flex-direction: column;
}

.add {
  border-radius: 30px;
  min-width: 120px;
  margin: 20px 0;
  height: 160px;
  background-color: gainsboro;
}
.add:hover {
  background-color: rgb(233, 233, 233);
}

.color {
  background-color: #7efff5;
}

.el-icon-delete {
  font-size: 24px;
  color: rgb(255, 255, 255);
  text-align: right;
}

.el-icon-delete:hover {
  color: #ee5253;
}

.door {
  width: 192px;
  height: 192px;
  padding: 10px 30px;
  box-sizing: border-box;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.valid_door {
  background-image: url("~@img/close_valid.svg");
}

.valid_door:hover {
  background-image: url("~@img/open_valid.svg");
}

.invalid_door {
  background-image: url("~@img/close_invalid.svg");
}

.name {
  color: white;
  font-size: 1.2rem;
  font-weight: bold;
  width: 1.2rem;
}

.descriptions {
  padding: 10px 10px 10px;
  display: flex;
  flex-direction: column;
  background-color: turquoise;
  margin-bottom: 30px;
  color: white;
}

@media screen and (max-width: 1600px) {
  .calender {
    /* padding: 1rem 3rem; */
    display: none;
  }
}
</style>
